<template>
  <div>
    <el-row>
      <el-col :span="24" :xs="24">
        <h1 style="text-align: center">欢迎使用登录</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" :xs="24">
        <el-tabs :activeName="phone" type="card">
          <el-tab-pane label="手机登录" name="phone">
            <el-row>
              <el-col :span="16" :push="7">
                <el-form
                  ref="formPhone"
                  size="small"
                  class="demo-ruleForm"
                  :rules="rules"
                  :model="form"
                  :label-position="position"
                >
                  <el-form-item label="手机号码" prop="phone">
                    <i class="el-icon-phone"></i>
                    <el-input v-model="form.phone" type="text" placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="验证码" prop="yzm">
                    <el-input v-model="form.yzm" type="text"></el-input>
                  </el-form-item>
                  <el-form-item label>
                    <el-button type="primary" style="margin-top: 15px" @click="yzm">验证码发送</el-button>
                    <yzm @but="but"></yzm> <span>{{yzmValue}}</span>
                  </el-form-item>
                  <el-form-item label="按钮">
                    <el-button type="button" @click="submit">提交</el-button>
                  </el-form-item>
                </el-form>
                <el-radio-group v-model="position">
                  <el-radio label="right">右</el-radio>
                  <el-radio label="top">中</el-radio>
                  <el-radio label="left">左</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="账号登录" name="zhang">
            <el-row>
              <el-col :span="16" :push="7">
                <el-form
                  ref="formUser"
                  size="small"
                  style="width: 60%; margin-top: 100px"
                  :label-position="position"
                  class="demo-ruleForm"
                  :rules="rules"
                  :model="form"
                >
                  <el-form-item label="账号" prop="name">
                    <i class="el-icon-user"></i>
                    <el-input v-model="form.name" type="text" placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="pass">
                    <i class="el-icon-message"></i>
                    <el-input v-model="form.pass" type="password" placeholder></el-input>
                  </el-form-item>
                  <el-form-item label="按钮">
                    <el-button @click="userSubmit">提交</el-button>
                    <el-button type="reset" @click="reset('form')">重置</el-button>
                  </el-form-item>
                </el-form>
                <el-radio-group v-model="position">
                  <el-radio label="right">右</el-radio>
                  <el-radio label="top">中</el-radio>
                  <el-radio label="left">左</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import yzm from './yzm/index'
import {useRoute} from 'vue-router'
import { reactive,getCurrentInstance,toRefs,watchEffect, onMounted } from 'vue';
export default {
  setup () {
    const Route = useRoute()
    
    const data = {
        phone: "phone",
        position: "left",
        options: [
          {
            value: "湖南",
            lable: "hunan",
          },
          {
            value: "武汉",
            lable: "wuhan",
          },
        ],
        form: {
          name: "",
          pass: "",
          sex: "",
          checkbox: [],
          model: "",
          date: "",
          time: new Date().toLocaleString(),
          text: "",
        },
        rules: {
          model: [
            {
              required: true,
              message: "你是哪里人",
            },
          ],
          name: [
            { required: true, message: "请输入账号", trigger: "blur" },
            { min: 5, max: 15, message: "长度在3-5个范围", trigger: "blur" },
          ],
          pass: [
            { required: true, message: "请输入密码", trigger: "blur" },
            { min: 5, max: 15, message: "长度在3-5个范围", trigger: "blur" },
          ],
          sex: [
            {
              required: true,
              message: "请选择性别",
              trigger: "blur",
            },
          ],
          checkbox: [
            {
              required: true,
              message: "请选择爱好",
            },
          ],
          date: [
            {
              required: true,
              message: "日子过的很快",
            },
          ],
          time: [
            {
              required: true,
              message: "时间是很珍贵的",
            },
          ],
          text: [
            {
              required: true,
              message: "请留下你的脚印",
            },
          ],
        },
        msg: "hello",
        name: "",
        pass: "",
        user: "",
        pa: "",
        yzmValue: ''
        
    };
    const methods = {
      reset: function (formname) {
        this.$refs.formUser.resetFields();
      },
      but: function (val) {
        data.yzmValue = val;
      },
      userSubmit: function () {
        let judge = this.$refs.formUser.validate();
        let self = this;
        // console.log(judge);
        judge.then((res) => {
          if (res) {
            let obj = {
              user: self.form.name,
              pass: self.form.pass,
            };
            self.$http("post", "/deng", obj).then((x) => {
              // console.log(x);
              if (x.data.ok === 200) {
                self.$message.success("登陆成功");
                self.$router.push({
                  name: "view",
                  params: {
                    name: obj.user,
                  },
                });
              } else {
                self.$message.error("登陆失败");
              }
            });
          }
        });
      },
      yzm: function () {
        const data = {
          phone: this.form.phone,
        };
        const header = {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        };
        axios
          .post("http://localhost:8000/dome.php", qs.stringify(data), header)
          .then((res) => {
            console.log(res.data);
          });
      },
      submit: function () {
        if(this.form.yzm === this.yzmValue) {
          this.$message({
            type: 'success',
            message: '成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '失败'
          })
        }
      }
    }
    let result = reactive({...data})
    watchEffect(useRoute,(res=>{
      console.log(res,'123')
    }))
    onMounted(() => {
      console.log(Route)
    })
    return {
      ...methods,
      ...toRefs(result)
    }
  },
  components: {
    yzm
  }
};
</script>

